<template>
  <section id="index" class="wrapper">
    <h4>single Value</h4>
    <div>{{single$}}</div>
    <br>

    <h4>Array</h4>
    <ul>
      <li v-for="item of arr0$">{{item}}</li>
    </ul>
    <br>
    <ul>
      <li v-for="item of arr1$">{{item}}</li>
    </ul>
    <br>

    <h4>Interval</h4>
    <div>{{interval$}}</div>
    <br>

    <h4>High-order</h4>
    <div>{{high$}}</div>
    <br>

    <h3>Character</h3>
    <ul>
      <li>{{A$}}</li>
      <li>{{B$}}</li>
      <li>{{C$}}</li>
      <li>{{D$}}</li>
      <li>{{E$}}</li>
    </ul>
    <br>
    <a href="javascript:void(0);">+1</a>
    <input type="hidden">
  </section>
</template>

<script>
import Vue from 'vue'
import Rx from 'rxjs/Rx'
import VueRx from 'vue-rx'
Vue.use(VueRx, Rx)

import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/of'
import 'rxjs/add/observable/from'
import 'rxjs/add/operator/toArray'
import 'rxjs/add/observable/interval'
import 'rxjs/add/observable/range'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/mergeAll'

const single$ = Observable.of(Math.PI)
const arr0$ = Observable.of([1, 1, 2, 3, 5, 8, 11])
// const arr1$ = Observable.from([1, 1, 2, 3, 5, 8, 11])
const arr1$ = Observable.from([1, 6])

const interval$ = Observable.interval(1000)

const high$ = Observable.range(1, 5)
  .map(item => Observable.interval(item * 1000))
  .mergeAll()

const A$ = Observable.interval(1000)
const B$ = Observable.of(3)
const C$ = Observable.from([5, 6, 7])
const D$ = C$.toArray()
  .map(arr => arr.reduce((a, b) => a + b), 0)
const E$ = Observable.combineLatest(A$, B$, D$)
  .map(arr => arr.reduce((a, b) => a + b), 0)


let count = 0
export default {
  name: "index",
  data: () => ({

  }),
  subscriptions: {
    single$,
    arr0$,
    arr1$,
    interval$,
    high$,
    A$,
    B$,
    C$,
    D$,
    E$,
  },
  methods: {
    func1 () {
      var date = new Date()
      date.setFullYear("2016")
      date.setMonth("5")
      date.setDate("17")
      date.setHours("0")
      date.setMinutes("0")
      date.setSeconds("0")
      console.log(date)
    },
    func2 () {
      var dayTime = 1000 * 60 * 60 * 24;
      var startTime = 0;
      var endTime = new Date().getTime();
      startTime = endTime - dayTime * 30;
      console.log(endTime)
      console.log(startTime);
      endTime = new Date(endTime)
      startTime = new Date(startTime)
      // endTime = endTime.format("yyyy-MM-dd");
      console.log(endTime)
      console.log(startTime);
    },
    func3 () {
      let myList = [
        {id: 1, value: 1},
        {id: 2, value: 2},
        {id: 3, value: 3}
      ]
      function removeByTarget (list, value, target) {
        console.log(list, value, target)
      	if (list.length > 0) {
      		for (var i = 0, len = list.length; i < len; i++) {
      			if (target) {
      				if (list[i][target] === value) {
      					list.splice(i, 1);
      					break;
      				}
      			} else {
      				if (list[i] === value) {
      					list.splice(i, 1);
      					break;
      				}
      			}
      		}
      	}
      	return list;
      }
      myList = removeByTarget(myList, 1, 'id')
      console.log(myList);
    },
  },
  mounted() {
    //do something after mounting vue instance
    // this.func1()
    // this.func2()
    this.func3()
  }
}
</script>
<style lang="scss" scoped>
</style>
